<template>
  <div class="info_page">
    <!-- 用户头像区域 开始 -->
    <UserAvatar v-model="form.avatar" :info="userInfo" eidt />
    <!-- 用户头像区域 end -->

    <!-- 信息区域 开始 -->
    <div class="user_info">
      <el-form
        ref="form"
        :model="form"
        :rules="formRules"
        label-width="80px"
        label-position="left"
        hide-required-asterisk
      >
        <el-form-item label="昵称" prop="username">
          <el-input type="text" v-model="form.username" class="a_input" />
        </el-form-item>
        <el-form-item label="手机">
          <el-input type="text" v-model="form.phone" class="a_input" disabled />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="form.newPassword"
            class="a_input"
            placeholder="请输入新密码"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="surePassword">
          <el-input
            type="password"
            v-model="form.surePassword"
            class="a_input"
            placeholder="请确认密码"
          />
        </el-form-item>
        <el-form-item label="">
          <el-button
            type="primary"
            class="btn"
            :loading="loading"
            @click="saveInfo"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 信息区域 end -->
  </div>
</template>
<script>
import {
  LOGOUT_BY_PASSWORD,
  GET_PERSONAL_INFO,
  SAVE_PERSONAL_AVATAR,
  UPDATE_PERSONAL_INFO,
} from "@/http/interface";
import { Form, FormItem, Input } from "element-ui";
import UserAvatar from "@/components/user/index.vue";
import { deepClone, showToast } from "@/utils/utils";
export default {
  name: "MyInfo",
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    UserAvatar,
  },
  data() {
    return {
      userInfo: {},
      form: {},
      formRules: {
        username: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
        ],
        newPassword: [
          { max: 12, min: 6, message: "密码必须在6-12位", trigger: "blur" },
        ],
        surePassword: [
          { max: 12, min: 6, message: "密码必须在6-12位", trigger: "blur" },
          { validator: this.checkPassword, trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  created() {
    let token = this.$cookies.get("token");
    this.uploadHeaders = { Authorization: token };
    this.userInfo = this.$cookies.get("userInfo");
    this.form = { ...this.userInfo };
    //this.getInfo();
  },
  methods: {
    // 获取用户信息
    async getInfo() {
      let res = await this.$axios.get(GET_PERSONAL_INFO);
      let o = res.data || {};
      this.userInfo = o;
      this.form = { ...o };
      this.$cookies.set("userInfo", o);
    },

    // 校验手机号码
    checkPassword(rule, value, callback) {
      let o = this.form;
      if(o.newPassword && !value){
        return callback(new Error("请输入确认密码"));
      }
      
      if (o.newPassword && value !== o.newPassword) {
        return callback(new Error("两次密码输入不一致"));
      }
      callback();
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        _this.updateInfo();
      });
    },

    // 修改用户信息
    async updateInfo() {
      let o = deepClone(this.form);
      let params = {};
      params.nickname = o.username;
      params.avatar = o.avatar;
      if (o.newPassword) {
        params.newPassword = o.newPassword;
      }
      this.loading = true;
      let res = await this.$axios.post(UPDATE_PERSONAL_INFO, params);
      this.loading = false;
      if (res.code == 200) {
        showToast({
          message: "保存成功",
          type: "success",
        });
        this.getInfo();
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/my/info.less";
</style>